<template>
  <el-header>
    <el-icon class="toggle-btn">
      <Operation />
    </el-icon>
    <div class="system-title">电商后台管理系统</div>
    <div>
      <span class="welcome">
        您好，{{ $store.state.username }}
      </span>
        <el-button type="text" @click="logout">退出</el-button>
    </div>
  </el-header>
</template>

<script setup>
import {
  Operation
} from '@element-plus/icons-vue'
</script>
<style lang="scss" scoped>
.el-header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #545c64;
}

.logo {
  height: 60px;
  background: url(../assets/vue.svg);
  background-size: cover;
  background-color: #989898;
}

.toggle-btn {
  font-size: 36px;
  color: #989898;
  cursor: pointer;
  line-height: 60px;
}

.system-title {
  font-size: 28px;
  color: white;
}

.logout-btn {
  color: orange;
}</style>